<!DOCTYPE html>
<html>

<head>
    <title>组件库复习笔记</title>
    <script src="./assets/js/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="./assets/css/animate.css">
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/global.css">
</head>

<style>

    .pageA{
        color: white;
        padding: 10px 30px;
    }
    .pageA:hover{
        color: white;
        background-color: rgb(88, 87, 87);
    }
</style>

<body>
    <div class="global-head global-bgmcolor-gray">
        <div class="global-flex">
            <img src="./assets/image/mouseImg.jpg" height="100px" width="100px" alt="">
            <a class="pageA" href="./apiProject/api.html">布局页面(A)</a>
        </div>
    </div>

    <div class="global-flex">

        <div class="global-leftmenu global-text-center global-bgmcolor-menu">
            <h2 class="global-border-bottom global-margin-0">菜单列表</h2>
            <ul>
                <li><span onclick="foldMenu(this)">原生手撸组件→</span>
                    <ul class="global-text-center global-display-none menu animated fadeInLeft">
                        <li class="global-bgmcolor-gray" onclick="jumpMenu('./qrcode/index.html')">二维码生成器</li>
                        <li class="global-bgmcolor-gray" onclick="jumpMenu('./tree/treeComponents.html')">树结构组件</li>
                        <li class="global-bgmcolor-gray" onclick="jumpMenu('./transform/transformComponents.html')">穿梭框组件</li>
                        <li class="global-bgmcolor-gray" onclick="jumpMenu('./accordion/index.html')">手风琴组件</li>
                        <li class="global-bgmcolor-gray" onclick="jumpMenu('./progress/index.html')">进度条组件</li>
                    </ul>
                </li>
                <li><span onclick="foldMenu(this)">插件组件→</span>
                    <ul class="global-text-center global-display-none menu animated fadeInLeft">
                        <li class="global-bgmcolor-gray" onclick="jumpMenu('./assets/plugins/jquery-Select(省市区三级联动)/index.html')">省市区三级联动组件</li>
                    </ul>
                </li>
                <li><span onclick="foldMenu(this)">网址导航→</span>
                    <ul class="global-text-center global-display-none menu animated fadeInLeft">
                        <li class="global-bgmcolor-gray" onclick="jumpMenu('树结构组件')">树结构组件</li>
                        <li class="global-bgmcolor-gray" onclick="jumpMenu('穿梭框组件')">穿梭框组件</li>
                        <li class="global-bgmcolor-gray" onclick="jumpMenu('省市区三级联动组件')">省市区三级联动组件</li>
                    </ul>
                </li>
                <li><span onclick="foldMenu(this)">手撸登录页→</span>
                    <ul class="global-text-center global-display-none menu animated fadeInLeft">
                        <li class="global-bgmcolor-gray"><a href="./loginPages/cityRoad.html" style="color: white;">城市道路主题</a> </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- 内容区存放 -->
        <div class="global-content global-bgmcolor-black" id="pageContent">

        </div>
        <div class="global-rightmenu global-text-center global-bgmcolor-menu"></div>
    </div>

    <div class="global-footer global-bgmcolor-gray">

    </div>

</body>

<script>

    // 菜单折叠
    function foldMenu(attribute) {
        // 隐藏当前父级菜单的子菜单
        $(attribute).parent('li').parent('ul').children('li').each(function () {
            $(this).children('ul').removeClass('global-display-none')
            $(this).children('ul').removeClass('global-display-block')
            $(this).children('ul').addClass('global-display-none')
        })
        /*判断当前已打开，关闭当前*/
        $(attribute).next().addClass('global-display-block')
    }

    // 菜单点击操作
    function jumpMenu(menuUrl) {
        $('#pageContent').html('')
        $('#pageContent').html(
            '<iframe src="' + menuUrl + '" width="100%" height="100%"></iframe>'
        )
    }
</script>

</html>